<template>
	<div class="add-edit-container">
		<el-form
				ref="form"
				:rules="rules"
				:model="formData"
				label-position="left"
				label-width="100px"
				class="creAddForm">
			<el-form-item prop="code" :label="translate('label.menuCode')">
				<el-input v-model="formData.code" :placeholder="translate('label.inputMenuCode')"
						  :disabled="type === HandleTypeEnum.edit" @input="inputCode"/>
			</el-form-item>
			<el-form-item :label="translate('label.menuPath')" prop="modPath">
				<el-input v-model="formData.modPath" disabled/>
			</el-form-item>
<template v-if="formData.i18nList&&formData.i18nList.length>0">
			<!--简体菜单名-->
			<el-form-item prop="i18nList[0].value" :label="translate('label.menuNameZHCN')" :rules="rules.name">
				<el-input v-model="formData.i18nList[0].value" :placeholder="translate('label.inputMenuName')"
						  :disabled="formData.type!==MenuTypeEnum.group"/>
			</el-form-item>
			<!--繁体菜单名-->
			<el-form-item prop="i18nList[1].value" :label="translate('label.menuNameZHTW')" :rules="rules.name">
				<el-input v-model="formData.i18nList[1].value" :placeholder="translate('label.inputMenuName')"
						  :disabled="formData.type!==MenuTypeEnum.group"/>
			</el-form-item>
			<!--英文菜单名-->
			<el-form-item prop="i18nList[2].value" :label="translate('label.menuNameENUS')" :rules="rules.name">
				<el-input v-model="formData.i18nList[2].value" :placeholder="translate('label.inputMenuName')"
						  :disabled="formData.type!==MenuTypeEnum.group"/>
			</el-form-item>
</template>
<template v-else>
			<!--菜单名-->
			<el-form-item prop="name" :label="translate('label.menuName')">
				<el-input v-model="formData.name" :placeholder="translate('label.inputMenuName')"
						  :disabled="formData.type!==MenuTypeEnum.group"/>
			</el-form-item>
</template>
			<el-form-item :label="translate('label.menuIcon')" :required="true">
				<!--系统选择-->
				<el-popover placement="bottom-start" v-if="!formData.iconDefault">
					<div slot="reference" class="select-sys" v-if="!formData.iconFont">
						<vab-icon icon="file-search-fill"/>
						<span>{{ translate('label.formSys') }}</span>
					</div>
					<div slot="reference" class="select-sys" v-if="formData.iconFont">
						<vab-icon :icon="formData.iconFont" class="v-icon"/>
						<div class="delete">
							<i class="el-icon-delete" @click="removeIcon"></i>
						</div>
					</div>
					<vab-icon-selector @select="fontIconChange" style="width: 320px"/>
				</el-popover>

				<!--自定义默认图标-->
				<el-upload v-if="!formData.iconFont" class="upload-img contain-img"
						   :class="{'readonly':fileList1.length>0}"
						   action=""
						   list-type="picture-card"
						   accept=".jpg, .png, .jpeg"
						   :on-remove="uploadRemove1"
						   :on-change="uploadChange1"
						   :file-list="fileList1"
						   :auto-upload="false"
						   v-loading="imageLoading">
					<i class="el-icon-upload" style="font-size:42px" width="90">
						<div class="el-upload__text" style="font-size:14px">{{ translate('label.defUpload') }}</div>
					</i>
				</el-upload>
				<!--激活状态图标-->
				<el-upload v-if="formData.iconDefault" class="upload-img contain-img"
						   :class="{'readonly':fileList2.length>0}"
						   action=""
						   list-type="picture-card"
						   accept=".jpg, .png, .jpeg"
						   :on-remove="uploadRemove2"
						   :on-change="uploadChange2"
						   :file-list="fileList2"
						   :auto-upload="false"
						   v-loading="imageLoading">
					<i class="el-icon-upload" style="font-size:42px" width="90">
						<div class="el-upload__text" style="font-size:14px">{{ translate('label.actUpload') }}</div>
					</i>
				</el-upload>
			</el-form-item>
		</el-form>
		<div class="dialog-footer" style="text-align:center">
			<el-button type="primary" @click="save">{{ translate('button.sure') }}</el-button>
			<el-button @click="cancel">{{ translate('button.cancel') }}</el-button>
		</div>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	</div>
</template>
<script lang="ts">
import _ from 'lodash';
import {Component, Emit, Prop} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'

import {isCode} from '@/utils/validate'

import MenuMgtService from '@/views/system/menu-mgt/menu-mgt.service';
import MenuModel from "./model/menu.model";
import {HandleTypeEnum, I18nEnum, MenuIconKeyEnum, MenuTypeEnum} from "@/common/enum/common.enum";
import {baseURL} from '@/config';
import VabIconSelector from '@/vab/components/VabIconSelector'
import {DeviceEnum} from "./enum/menu-mgt.enum";
import {ElForm} from "element-ui/types/form";
import ResponseModel from "../../../common/model/response.model";
import MenuI18nModel from "./model/menu-i18n.model";

@Component({components: {VabIconSelector}})
export default class login extends BaseVue {
	@Prop(Object) data;
	/*接收操作类型*/
	@Prop({required: true, type: String})
	private type: HandleTypeEnum;

	private $refs: {
		form: ElForm
	}

	/*操作类型枚举*/
	private HandleTypeEnum = HandleTypeEnum;

	/*平台类型*/
	@Prop({required: true, type: String})
	private deviceType: DeviceEnum;

	/*菜单节点类型枚举*/
	private MenuTypeEnum = MenuTypeEnum;

	/*图片图标加载loading控制 */
	private imageLoading = false;

	/*提交数据loading*/
	private submitLoading = false;

	/*菜单模型*/
	private formData: MenuModel = new MenuModel();

	/*i18n List 模型*/
	private i18nList: MenuI18nModel[] = [];

	/*校验规则*/
	private rules: {
		name: object[],
		modPath: object[],
		code: object[]
	};
	/*文件列表*/
	private fileList1 = [];
	/*文件列表*/
	private fileList2 = [];

	/**
	 * 生命周期created
	 */
	private created() {
		// 国际化提示
		this.rules = {
			name: [{required: true, message: this.translate('label.inputMenuName'), trigger: 'change'}],
			modPath: [{required: true, message: ' '}],
			code: [{required: true, message: this.translate('label.inputMenuCode'), trigger: 'change'},
				{validator: isCode, message: this.translate('validate.isCode'), trigger: 'change'}
			],
		}

		// 菜单类型
		this.formData.deviceType = this.deviceType;

		// 如果是编辑，克隆数据以修改
		if (this.type === HandleTypeEnum.edit) {
			this.formData = _.cloneDeep(this.data);
			if (this.formData.iconDefault) {
				this.fileList1 = [{url: baseURL + '/sys/menuImage/getMenuImage?iconKey=' + this.formData.iconDefault}];
			}
			if (this.formData.iconActive) {
				this.fileList2 = [{url: baseURL + '/sys/menuImage/getMenuImage?iconKey=' + this.formData.iconActive}];
			}
		} else {
			this.formData.type = MenuTypeEnum.group;
			// 新增初始化的列表，顺序必须保持和表单的一致
			this.i18nList = [
				{key: '', value: '', language: I18nEnum.zhCN},
				{key: '', value: '', language: I18nEnum.zhTW},
				{key: '', value: '', language: I18nEnum.enUS}
			]
			this.$set(this.formData, 'i18nList', this.i18nList);
		}
	};

	/**
	 * 生命周期mounted
	 */
	private mounted() {

	};

	/**
	 * 输入菜单code
	 */
	private inputCode(val: string) {
		if (val) {
			this.formData.modPath = '/' + val
			// 设置nameI18nKey为当前填写的code 前面拼接字符串
			this.formData.nameI18nKey = 'Menu-' + this.formData.code;
			this.i18nList.forEach(item => {item.key = 'Menu-' + this.formData.code});
		} else {
			this.formData.modPath = ''
			this.formData.nameI18nKey = '';
			this.i18nList.forEach(item => {item.key = ''});
		}
	};

	/**
	 * 保存
	 */
	private save() {
		this.$refs.form.validate((valid: boolean) => {
			if (valid) {
				//如果没有选择图标
				if (!this.formData.iconFont && !this.formData.iconDefault) {
					return this.$message.warning(this.translate('label.uploadMenuIcon'))
				}

				this.formData.name = this.i18nList[0].value;

				//测试代码
				this.i18nList.forEach(item => {
					item.initConfig=true;
					item.tid=null;
					item.type='Menu-group';
					item.status=true;
					item.key = 'Menu-' + this.formData.code;
				});

				this.submitLoading = true;
				MenuMgtService.saveOrUpdateSysMenu(this.formData).then(res => {
					if (res.status === 200) {
						this.$message.success(this.translate('tips.saveSuccess'));
						this.submitLoading = false;
						this.$emit('success', this.formData);
					}
				}).catch(e => {
					this.submitLoading = false;
				})
			}
		});
	}

	/**
	 * 选择字体图标
	 */
	private fontIconChange(val: string) {
		this.$set(this.formData, MenuIconKeyEnum.iconFont, val);
		this.$set(this.formData, MenuIconKeyEnum.iconDefault, '');
		this.$set(this.formData, MenuIconKeyEnum.iconActive, '');
	}

	/**
	 * 删除图标
	 */
	private removeIcon() {
		this.$set(this.formData, MenuIconKeyEnum.iconFont, '')
	};


	/**
	 * 删除文件1
	 */
	private uploadRemove1() {
		this.$set(this.formData, MenuIconKeyEnum.iconDefault, '')
		this.fileList1 = [];
	};

	/**
	 * 删除文件2
	 */
	private uploadRemove2() {
		this.$set(this.formData, MenuIconKeyEnum.iconActive, '')
		this.fileList2 = [];
	};

	/**
	 * 选择文件1
	 */
	private uploadChange1(file: object, fileList: []) {
		this.upload('fileList1', MenuIconKeyEnum.iconDefault, file, fileList)
	};

	/**
	 * 选择文件2
	 */
	private uploadChange2(file: object, fileList: []) {
		this.upload('fileList2', MenuIconKeyEnum.iconActive, file, fileList)
	};

	/**
	 * 上传方法
	 */
	private upload(listKey: string, key: string, file: object, fileList: []) {
		// 校验文件大小200k
		if (file.size > 200 * 1020) {
			this[listKey] = [];
			return this.$message.warning(this.translate('label.menuIconSize'))
		}

		this[listKey] = fileList;
		let data = new FormData();
			data.append('file', file.raw);
			file.status = 'uploading';
		MenuMgtService.uploadImage(data).then((res: ResponseModel) => {
			if (res.status === 200) {
				this.$set(this.formData, key, res.data.key);
				this.$set(this.formData, MenuIconKeyEnum.iconFont, '');
				file.status = 'success';
			} else {
				this[listKey] = [];
			}
		}).catch(err => {
			this[listKey] = [];
		})
	};

	@Emit('cancel')
	public cancel() {
	}
};
</script>
<style lang="scss" scoped>
.add-edit-container {
	padding: 0 20px;

	.el-button {
		border-radius: 6px;
	}

	.upload-img {
		float: left;
		margin-right: 10px;
	}

	.select-sys {
		margin-right: 10px;
		cursor: pointer;
		width: 95px;
		height: 95px;
		line-height: 1;
		background-color: #fbfdff;
		border: 1px dashed #c0ccda;
		border-radius: 6px;
		float: left;
		position: relative;
		overflow: hidden;
		text-align: center;

		&:hover {
			border-color: $base-color-blue;
		}

		i.ri-file-search-fill {
			margin-top: 20px;
			display: block;
			text-align: center;
			color: #8c939d;

			&:before {
				font-size: 42px;
				display: block;
			}

			& + span {
				color: #8c939d
			}
		}

		.v-icon {
			line-height: 95px;
			font-size: 90px;
			color: $base-font-color-secondary;
		}

		.delete {
			transition: opacity 0.2s;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
			opacity: 0;
			background: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 20px;
			line-height: 95px;
		}

		&:hover .delete {
			opacity: 1
		}
	}
}
</style>
